.bgImg {
	background-image: linear-gradient(90deg, rgba(#fff, 0), rgba(#fff, 0.5), rgba(#fff, 0));
	background-size: 40px 100%; // width of the shine
	background-repeat: no-repeat; // No need to repeat the shine effect
	background-position: left -40px top 0; // Place shine on the left side, with offset on the left based on the width of the shine - see background-size
	animation: shine 1s ease infinite; // increase animation time to see effect in 'slow-mo'
}

@bg: #e6e6e6;

.yyt-st-skeleton {
	position: relative;
	box-sizing: border-box;
	width: 100vw;
	padding: 10rpx 20rpx;
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	.yyt-st-area-name {
		width: calc(100% / 3 - 20rpx);
		height: 40rpx;
		background-color: @bg;
		margin-bottom: 10rpx;
		margin-left: 10rpx;
		
		.bgImg();
	}

	.yyt-st-table-list-wrapper {
		width: 100%;
		box-sizing: border-box;
		margin: 10rpx;
		text-align: center;
		margin: 0 auto;
		display: grid;
		grid-template-rows: repeat(auto-fill, calc(100vw / 3 - 2 * 10rpx));
		grid-template-columns: repeat(auto-fill, calc(100% / 3));

		& > div {

			background-color: @bg;
			background-clip: content-box;
			margin: 10rpx;

			.bgImg();
		}
	}
}

@keyframes shine {
	// to {
	// 	// Move shine from left to right, with offset on the right based on the width of the shine - see background-size
	// 	background-position: right -40px top 0;
	// }
	0% {
	  opacity: 1;
	}
	50% {
	  opacity: 0.6;
	}
	100% {
	  opacity: 1;
	}
}